<template>

  <van-uploader v-model="fileList"
                :after-read="onAfterRead">
    <van-button icon="plus" type="primary">上传任务清单</van-button>
  </van-uploader>

  <van-tabs v-model:active="active" @click-tab="onClickTab">
    <van-tab title="当月"></van-tab>
    <van-tab v-for="version_index in versionList" :title="version_index"></van-tab>
  </van-tabs>

  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
    <van-row style="text-align: center;margin-top: 20px">
      <van-col span="4"><span style="font-weight: bold;">SRQ</span></van-col>
      <van-col span="10"><span style="font-weight: bold;">描述</span></van-col>
      <van-col span="2"><span style="font-weight: bold;">环境</span></van-col>
      <van-col span="2"><span style="font-weight: bold;">SQL</span></van-col>
      <van-col span="2"><span style="font-weight: bold;">DMS</span></van-col>
      <van-col span="3"><span style="font-weight: bold;">进度</span></van-col>
      <van-col span="1"><span style="font-weight: bold;">操作</span></van-col>
    </van-row>
    <van-cell v-for="item in userTaskList" :key="item.version">
      <van-row style="text-align: center;">
        <span class="van-row"><span style="font-weight: bold;">版本：</span>
          {{ item.version }}</span>
      </van-row>
      <van-row v-for="recordIndex in item.record" style="text-align: center;">
        <van-col span="4">

          <a :href="recordIndex.taskUrl" target="_blank"
             style="color: blue; text-decoration: none;">
            <van-button plain type="primary">{{ recordIndex.taskCode }}</van-button>
          </a>
        </van-col>
        <van-col span="10" @click="copyText(recordIndex)">
          <van-notice-bar
              :text="recordIndex.taskName"
          />
        </van-col>
        <van-col span="2">
          {{ recordIndex.environment }}
        </van-col>
        <van-col span="2">
          <van-icon :name="recordIndex.isSql === '1'?'success':'cross'" size="30px"/>
        </van-col>
        <van-col span="2">
          <van-icon :name="recordIndex.isDms === '1'?'success':'cross'" size="30px"/>
        </van-col>
        <van-col span="3">
          <van-circle
              v-model:current-rate="recordIndex.plan"
              :rate="recordIndex.plan"
              :speed="100"
              :text="recordIndex.plan+'%'"
              size="80px"
          />
        </van-col>
        <van-col style="color: #0078ff" span="1" @click="updateTask(recordIndex)">编辑</van-col>
      </van-row>
    </van-cell>

  </van-list>

</template>

<script setup>
import {onMounted, ref, computed} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {Notify, Toast} from "vant";

const fileList = ref([]);
const copyText = (value) => {
  Notify({type: 'success', message: '复制成功！'});
  const copyStr = value.taskCode + '：' + value.taskName
  navigator.clipboard.writeText(copyStr).then(() => {
  }).catch(err => {
    console.error('Error copying text: ', err);
  });
};
const onAfterRead = (file) => {
  // 此时可以自行将文件上传至服务器  /api
  console.log(file);
  myAxios.post('/file/upload', {
    file: file.file,
    biz: 'user_task',
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(function (response) {
    let datafile = response.data;
    console.log('上传文件结果' + JSON.stringify(datafile));
    console.log('请求参数' + JSON.stringify(datafile.data));
    if (datafile.data != null && datafile.code === 200) {
      myAxios.post('/task/uploadTask', {
        taskFileUrl: datafile.data,
      });
    } else {
      return Toast.fail(datafile.message);
    }
  })
};
let userTaskList = ref([
  {
    version: "",
    record: [{
      id: '',
      taskCode: '',
      taskName: '无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。',
      isSql: '',
      isDms: '',
      environment: '',
      taskUrl: '',
      plan: 0
    }]
  }
]);
const currentRate = ref(0);
const active = ref(0);
const text = computed(() => currentRate.value.toFixed(0) + '%');
const loading = ref(false);
const versionList = ref([]);
const finished = ref(true);
import {useRouter, useRoute} from 'vue-router'
import {getAuthToken} from "../utils/auth.js";

const router = useRouter()
const route = useRoute()

async function updateTaskList(version = '') {
  console.log("请求入参" + version)
  await myAxios.post('/task/list', {
    version: version,
  }).then(function (response) {
    userTaskList.value = response.data.data
  }).catch(function (error) {
    console.log("失败请求" + response)
  });
}

async function updateTaskVersion() {
  await myAxios.post('/task/version', {}).then(function (response) {
    versionList.value = response.data.data
  }).catch(function (error) {
    console.log("失败请求" + response)
  });
}

onMounted(async () => {
  await updateTaskList();
  await updateTaskVersion();
})
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    // 加载状态结束
    loading.value = false;
    // 数据全部加载完成
    // if (userList.value.length >= 10) {
    //   finished.value = true;
    // }
  }, 1000);
}

const updateTask = (value) => {
  router.push({
    path: '/task/update',
    query: {
      id: value.id,
      taskCode: value.taskCode,
      taskName: value.taskName,
      isSql: value.isSql,
      isDms: value.isDms,
      environment: value.environment,
      taskUrl: value.taskUrl,
      plan: value.plan
    }
  })

}

const onClickTab = (value) => {
  let title = value.title;
  if (title === '当月') {
    title = '';
  }
  updateTaskList(title)
}
</script>
<style scoped>

.van-row {
  margin-top: 10px;
  margin-left: 10px;
}


</style>